<template>
  <div class="date-time-picker">
    <span style="margin-right:4px">{{ label }}</span>
    <el-date-picker
      v-model="text"
      type="datetime"
      size="mini"
      :default-time="defaultTime"
      :style="{width:`${width}px !important`}"
      :disabled="disabled"
      clearable
      :picker-options="expireTimeOption"
      :format="format"
      value-format="yyyy-MM-dd HH:mm:ss"
      @change="valueChange"
    />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '180'
    },
    defaultTime: {
      type: String,
      default: '00:00:00'
    },
    disabled: {
      type: [Boolean, String],
      default: false
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    expireTimeOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      text: ''
    }
  },
  created() {
    this.text = this.value
  },
  mounted() {},
  methods: {
    valueChange(val) {
      this.$emit('update:value', this.text)
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="less" scoped>
.date-time-picker{
  display: inline-flex;
  align-items: center;
}
</style>
